<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>燕云十六声 - 官方网站</title>
    <!-- 引入Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 引入Element Plus -->
    <link href="https://unpkg.com/element-plus/dist/index.css" rel="stylesheet">
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <!-- 引入艺术字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
    <style>
        /* 全局样式 */
        /* 确保星星和装饰元素的动画流畅 */
        .star, .decoration-path {
            will-change: transform, opacity;
            transform: translateZ(0);
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* 创建动态黑色背景 */
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            line-height: 1.6;
            color: #ffffff; /* 白色文字，确保在黑色背景上清晰可见 */
            background-color: #000000;
            position: relative;
            overflow-x: hidden;
            margin: 0;
            padding: 0;
        }
        
        /* 动态星空背景 */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
            z-index: -2;
        }
        
        /* 动态水墨效果 */
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
                radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.02) 0%, transparent 60%),
                radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.04) 0%, transparent 55%);
            animation: inkFlow 20s ease-in-out infinite alternate;
            z-index: -1;
        }
        
        /* 水墨流动动画 */
        @keyframes inkFlow {
            0% {
                background-position: 0% 0%, 0% 0%, 0% 0%;
            }
            100% {
                background-position: 100% 100%, 50% 50%, 80% 20%;
            }
        }
        
        /* 动态星星效果 */
        .stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -3;
        }
        
        .star {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            animation: twinkle 3s ease-in-out infinite;
        }
        
        @keyframes twinkle {
            0%, 100% {
                opacity: 0.3;
                transform: scale(0.8);
            }
            50% {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        /* 古风动态装饰 */
        .ancient-decoration {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -4;
            opacity: 0.05;
        }
        
        .decoration-path {
            stroke: white;
            stroke-width: 1;
            fill: none;
            animation: pathFlow 30s linear infinite;
        }
        
        @keyframes pathFlow {
            0% {
                stroke-dashoffset: 1000;
            }
            100% {
                stroke-dashoffset: 0;
            }
        }
        
        /* 古风白色草书标题样式 */
        .ink-brush-title {
            font-family: 'Ma Shan Zheng', 'STKaiti', cursive;
            font-size: 8rem;
            font-weight: normal;
            margin: 0;
            text-align: center;
            color: #ffffff;
            letter-spacing: 8px;
            animation: brushFlow 8s ease-in-out infinite, brushFade 10s ease-in-out infinite;
            position: relative;
            display: inline-block;
            transform-style: preserve-3d;
            opacity: 0.9;
        }
        
        /* 草书流动动画 */
        @keyframes brushFlow {
            0%, 100% {
                transform: translateY(0) rotate(0deg) skew(0deg);
            }
            25% {
                transform: translateY(-5px) rotate(-0.5deg) skew(-0.5deg);
            }
            50% {
                transform: translateY(0) rotate(0deg) skew(0deg);
            }
            75% {
                transform: translateY(5px) rotate(0.5deg) skew(0.5deg);
            }
        }
        
        /* 墨迹淡入淡出效果 */
        @keyframes brushFade {
            0%, 100% {
                opacity: 0.8;
            }
            50% {
                opacity: 1;
            }
        }
        
        /* 装饰性墨迹效果 */
        .ink-brush-title::after {
            content: attr(data-text);
            position: absolute;
            left: 0;
            top: 0;
            color: rgba(255, 255, 255, 0.3);
            z-index: -1;
            transform: translate(5px, 5px) scale(1.02);
            filter: blur(2px);
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .ink-brush-title {
                font-size: 6rem;
                letter-spacing: 6px;
            }
        }
        
        @media (max-width: 480px) {
            .ink-brush-title {
                font-size: 4rem;
                letter-spacing: 4px;
            }
        }
        
        /* 登录相关样式 */
        .auth-buttons {
            display: flex;
            align-items: center;
        }
        
        .login-button, .logout-button {
            padding: 8px 20px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-left: 15px;
            border: none;
            text-decoration: none;
            display: inline-block;
        }
        
        .login-button {
            background: linear-gradient(45deg, #f5d76e 0%, #f1c40f 100%);
            color: #1a1a2e;
        }
        
        .login-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(245, 215, 110, 0.4);
        }
        
        .logout-button {
            background: #e74c3c;
            color: white;
        }
        
        .logout-button:hover {
            background: #c0392b;
            transform: translateY(-2px);
        }
        
        /* 高级登录模态框样式 */
        .elegant-login-dialog {
            border-radius: 20px !important;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
            backdrop-filter: blur(8px);
            background: rgba(255, 255, 255, 0.98) !important;
        }
        
        /* 自定义头部 */
        .custom-header {
            text-align: center;
            padding-bottom: 20px;
        }
        
        .logo-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .login-title {
            font-size: 24px;
            font-weight: bold;
            color: #1a1a2e;
            margin-top: 10px;
            margin-bottom: 5px;
        }
        
        .login-subtitle {
            font-size: 14px;
            color: #666;
            margin: 0;
        }
        
        /* 表单样式 */
        .login-form {
            padding: 10px 0;
        }
        
        .elegant-input {
            height: 50px;
            border-radius: 10px;
            border: 1px solid #e0e0e0;
            transition: all 0.3s ease;
            font-size: 16px;
        }
        
        .elegant-input:focus {
            border-color: #f5d76e;
            box-shadow: 0 0 0 3px rgba(245, 215, 110, 0.1);
        }
        
        .input-prepend {
            background-color: #f8f9fa;
            color: #666;
            width: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 账号中心样式 */
        .account-container {
            background: rgba(24, 24, 37, 0.7);
            border-radius: 16px;
            padding: 30px;
            backdrop-filter: blur(10px);
            margin-top: 30px;
        }
        
        .account-layout {
            display: flex;
            gap: 30px;
        }
        
        /* 侧边栏样式 */
        .account-sidebar {
            width: 280px;
            background: rgba(30, 30, 46, 0.8);
            border-radius: 12px;
            padding: 25px;
            flex-shrink: 0;
        }
        
        .user-profile-card {
            text-align: center;
            padding-bottom: 25px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 25px;
        }
        
        .profile-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: linear-gradient(45deg, #f5d76e, #f5ab45);
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            color: #ffffff;
            box-shadow: 0 4px 15px rgba(245, 215, 110, 0.3);
        }
        
        .profile-username {
            font-size: 22px;
            font-weight: bold;
            color: #ffffff;
            margin-bottom: 10px;
        }
        
        .profile-level {
            color: #f5d76e;
            font-size: 16px;
        }
        
        /* 导航菜单 */
        .nav-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .nav-menu-item {
            margin-bottom: 8px;
        }
        
        .nav-menu-link {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            border-radius: 8px;
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        
        .nav-menu-link:hover {
            background: rgba(245, 215, 110, 0.1);
            color: #f5d76e;
        }
        
        .nav-menu-link.active {
            background: rgba(245, 215, 110, 0.2);
            color: #f5d76e;
            border-left: 3px solid #f5d76e;
        }
        
        .nav-menu-icon {
            font-size: 20px;
        }
        
        /* 主内容区域 */
        .account-main-content {
            flex: 1;
            min-width: 0;
        }
        
        .content-section {
            background: rgba(30, 30, 46, 0.8);
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 30px;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }
        
        .section-action {
            color: #f5d76e;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s ease;
        }
        
        .section-action:hover {
            color: #f5ab45;
        }
        
        /* 统计数据 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            transition: transform 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-3px);
            background: rgba(255, 255, 255, 0.08);
        }
        
        .stat-value {
            font-size: 32px;
            font-weight: bold;
            color: #f5d76e;
            margin-bottom: 8px;
        }
        
        .stat-label {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
        }
        
        /* 最近活动 */
        .activity-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .activity-item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            margin-bottom: 12px;
        }
        
        .activity-icon {
            font-size: 20px;
            margin-top: 2px;
        }
        
        .activity-content {
            flex: 1;
        }
        
        .activity-title {
            color: #ffffff;
            font-size: 16px;
            margin-bottom: 4px;
        }
        
        .activity-time {
            color: rgba(255, 255, 255, 0.5);
            font-size: 13px;
        }
        
        /* 角色管理 */
        .characters-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .character-card {
            display: flex;
            align-items: center;
            gap: 20px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 20px;
            transition: transform 0.3s ease;
        }
        
        .character-card:hover {
            transform: translateY(-3px);
            background: rgba(255, 255, 255, 0.08);
        }
        
        .character-image {
            width: 80px;
            height: 80px;
            border-radius: 12px;
            background: rgba(245, 215, 110, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
        }
        
        .character-info {
            flex: 1;
        }
        
        .character-name {
            color: #ffffff;
            font-size: 20px;
            margin-bottom: 10px;
        }
        
        .character-details {
            display: flex;
            gap: 20px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 8px;
            font-size: 14px;
        }
        
        .form-input {
            width: 100%;
            padding: 12px 16px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            color: #ffffff;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #f5d76e;
        }
        
        .form-input:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        /* 按钮样式 */
        .btn {
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
        }
        
        .btn-primary {
            background: linear-gradient(45deg, #f5d76e, #f5ab45);
            color: #2d1950;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(245, 215, 110, 0.4);
        }
        
        .btn-secondary {
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
        }
        
        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.15);
        }
        
        /* 安全中心 */
        .security-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            margin-bottom: 15px;
        }
        
        .security-info h4 {
            color: #ffffff;
            margin-bottom: 5px;
        }
        
        .security-info p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            margin: 0;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .account-layout {
                flex-direction: column;
            }
            
            .account-sidebar {
                width: 100%;
            }
            
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .account-container {
                padding: 20px;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .character-card {
                flex-direction: column;
                text-align: center;
            }
            
            .character-details {
                justify-content: center;
            }
            
            .section-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
        }
            justify-content: center;
        }
        
        /* 表单选项 */
        .form-options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }
        
        .remember-checkbox {
            color: #666;
            font-size: 14px;
        }
        
        .forgot-password {
            font-size: 14px;
            color: #f5d76e !important;
        }
        
        .forgot-password:hover {
            color: #f1c40f !important;
        }
        
        /* 登录按钮 */
        .login-button-primary {
            width: 100%;
            height: 50px;
            font-size: 16px;
            font-weight: bold;
            border-radius: 10px;
            background: linear-gradient(135deg, #f5d76e 0%, #f1c40f 100%);
            border: none;
            color: #1a1a2e;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(245, 215, 110, 0.3);
        }
        
        .login-button-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(245, 215, 110, 0.5);
            background: linear-gradient(135deg, #f1c40f 0%, #f5d76e 100%);
        }
        
        .login-button-primary:active {
            transform: translateY(0);
        }
        
        /* 其他登录方式 */
        .other-login-methods {
            margin-top: 30px;
        }
        
        .divider {
            display: flex;
            align-items: center;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .divider::before,
        .divider::after {
            content: '';
            flex: 1;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .divider span {
            padding: 0 10px;
            font-size: 14px;
            color: #999;
        }
        
        .social-login {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        
        .social-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e0e0e0;
            transition: all 0.3s ease;
        }
        
        .social-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .social-btn.wechat {
            color: #07c160;
        }
        
        .social-btn.qq {
            color: #12b7f5;
        }
        
        .social-btn.weibo {
            color: #e6162d;
        }
        
        /* 表单元素动画 */
        .form-item-animation {
            animation: fadeInUp 0.5s ease-out;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .form-item-animation:nth-child(1) { animation-delay: 0.1s; }
        .form-item-animation:nth-child(2) { animation-delay: 0.2s; }
        .form-item-animation:nth-child(3) { animation-delay: 0.3s; }
        .form-item-animation:nth-child(4) { animation-delay: 0.4s; }
        
        /* 响应式调整 */
        @media (max-width: 480px) {
            .elegant-login-dialog {
                width: 90% !important;
                margin: 10% auto;
            }
            
            .login-title {
                font-size: 20px;
            }
            
            .elegant-input,
            .login-button-primary {
                height: 45px;
            }
        }
        
        /* 用户信息显示 */
        .user-info {
            display: flex;
            align-items: center;
            margin-left: 15px;
            color: white;
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #f5d76e;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
            font-weight: bold;
            color: #1a1a2e;
        }
        
        /* 头部样式 */
        header {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: #fff;
            padding: 20px 0;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 2;
        }
        
        .logo {
            font-size: 28px;
            font-weight: bold;
            color: #f5d76e;
            text-decoration: none;
            display: flex;
            align-items: center;
        }
        
        .logo span {
            margin-left: 10px;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 30px;
        }
        
        .nav-links a {
            color: #fff;
            text-decoration: none;
            font-size: 16px;
            transition: color 0.3s ease;
        }
        
        .nav-links li a:hover {
            color: #f5d76e;
        }
        
        .home-link:hover {
            color: #ffd700 !important;
        }
        
        /* 英雄区域 - 融入背景 */
        .hero {
            position: relative;
            height: 600px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            color: white;
            text-align: center;
            overflow: hidden;
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            padding: 0 20px;
        }
        
        .hero h1 {
            margin-bottom: 20px;
            /* 让.ink-brush-title类控制标题样式 */
        }
        
        .hero p {
            font-size: 20px;
            margin-bottom: 30px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }
        
        .hero-button {
            display: inline-block;
            background: linear-gradient(45deg, #f5d76e 0%, #f1c40f 100%);
            color: #1a1a2e;
            padding: 12px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-size: 18px;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(245, 215, 110, 0.4);
        }
        
        .hero-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(245, 215, 110, 0.6);
        }
        
        /* 内容区域 - 完全融入背景 */
        .content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 60px 20px;
            background: none;
            border: none;
            box-shadow: none;
        }
        
        .section {
            margin-bottom: 60px;
            padding: 20px;
            background: none;
            border: none;
            border-radius: 0;
            box-shadow: none;
        }
        
        .section-title {
            font-size: 32px;
            margin-bottom: 30px;
            color: #ffffff; /* 白色文字 */
            text-align: center;
            position: relative;
            padding-bottom: 15px;
            text-shadow: none;
            font-weight: bold;
        }
        
        .section-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, #f5d76e 0%, #f1c40f 100%);
        }
        
        .info-text {
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 20px;
            color: #ffffff; /* 白色文字 */
            background: transparent;
            padding: 0;
            border-radius: 0;
            border-left: none;
        }
        
        /* 特性卡片 */
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .feature-card {
            background: #ffffff;
            border-radius: 10px;
            padding: 25px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-top: 3px solid #f5d76e;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            font-size: 40px;
            margin-bottom: 15px;
            color: #f5d76e;
        }
        
        .feature-title {
            font-size: 20px;
            margin-bottom: 10px;
            color: #ffffff; /* 白色文字 */
            text-shadow: none;
            font-weight: bold;
        }
        
        .feature-description {
            font-size: 14px;
            color: #ffffff; /* 白色文字 */
        }
        
        /* 游戏背景 */
        .game-background {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f0e6d2"/><path d="M0 50h100M50 0v100" stroke="%23e6d9c0" stroke-width="0.5"/></svg>');
            border-left: 4px solid #f5d76e;
        }
        
        /* 年龄警告 */
        .age-warning {
            background: #fff9e6;
            border-left: 4px solid #ffb300;
            padding: 20px;
            margin-top: 30px;
            border-radius: 0 8px 8px 0;
        }
        
        .age-warning h4 {
            color: #e67e22;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        
        .age-warning h4:before {
            content: '⚠️';
            margin-right: 10px;
        }
        
        /* 页脚 */
        footer {
            background: #1a1a2e;
            color: white;
            padding: 40px 0;
        }
        
        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
        }
        
        .footer-column h4 {
            font-size: 18px;
            margin-bottom: 20px;
            color: #f5d76e;
            position: relative;
            padding-bottom: 10px;
        }
        
        .footer-column h4:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 2px;
            background: #f5d76e;
        }
        
        .footer-column ul {
            list-style: none;
        }
        
        .footer-column ul li {
            margin-bottom: 10px;
        }
        
        .footer-column ul li a {
            color: #ddd;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .footer-column ul li a:hover {
            color: #f5d76e;
            padding-left: 5px;
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 20px;
            margin-top: 20px;
            border-top: 1px solid #333;
            color: #888;
            font-size: 14px;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
            }
            
            .nav-links {
                margin-top: 20px;
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .nav-links li {
                margin: 10px 15px;
            }
            
            .auth-buttons {
                margin-top: 15px;
                justify-content: center;
            }
            
            .login-button, .logout-button {
                margin: 5px;
            }
            
            .hero {
                height: 500px;
            }
            
            .hero h1 {
                font-size: 36px;
            }
            
            .hero p {
                font-size: 18px;
            }
            
            .section {
                padding: 25px;
            }
            
            .section-title {
                font-size: 28px;
            }
        }
        
        @media (max-width: 480px) {
            .hero {
                height: 400px;
            }
            
            .hero h1 {
                font-size: 28px;
            }
            
            .hero p {
                font-size: 16px;
            }
            
            .section {
                padding: 20px;
            }
            
            .section-title {
                font-size: 24px;
            }
        }
    </style>
    <script>
        // 生成动态星星效果
        document.addEventListener('DOMContentLoaded', function() {
            // 创建星星容器
            const starsContainer = document.createElement('div');
            starsContainer.className = 'stars';
            document.body.appendChild(starsContainer);
            
            // 创建古风装饰SVG
            const decorationSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            decorationSVG.className = 'ancient-decoration';
            decorationSVG.setAttribute('width', '100%');
            decorationSVG.setAttribute('height', '100%');
            document.body.appendChild(decorationSVG);
            
            // 生成星星
            const starCount = 100; // 星星数量
            for (let i = 0; i < starCount; i++) {
                const star = document.createElement('div');
                star.className = 'star';
                
                // 随机位置
                const x = Math.random() * 100;
                const y = Math.random() * 100;
                star.style.left = `${x}%`;
                star.style.top = `${y}%`;
                
                // 随机大小
                const size = Math.random() * 2 + 1;
                star.style.width = `${size}px`;
                star.style.height = `${size}px`;
                
                // 随机延迟动画
                const delay = Math.random() * 5;
                star.style.animationDelay = `${delay}s`;
                
                // 随机动画持续时间
                const duration = Math.random() * 5 + 2;
                star.style.animationDuration = `${duration}s`;
                
                starsContainer.appendChild(star);
            }
            
            // 生成古风装饰路径
            generateAncientDecoration(decorationSVG);
        });
        
        // 生成古风装饰路径
        function generateAncientDecoration(svg) {
            // 创建多个装饰路径
            const pathCount = 6;
            
            for (let i = 0; i < pathCount; i++) {
                const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                path.className = 'decoration-path';
                
                // 设置路径样式
                path.setAttribute('stroke-dasharray', '1000');
                
                // 随机位置和形状的装饰路径
                if (i % 3 === 0) {
                    // 波浪形路径
                    const startY = 100 + (i * 150);
                    path.setAttribute('d', `M0,${startY} Q200,${startY-50} 400,${startY} T800,${startY} T1200,${startY} T1600,${startY}`);
                } else if (i % 3 === 1) {
                    // 曲线形路径
                    const startY = 200 + (i * 100);
                    path.setAttribute('d', `M0,${startY} C300,${startY-80} 500,${startY+80} 800,${startY} C1100,${startY-80} 1300,${startY+80} 1600,${startY}`);
                } else {
                    // 圆形装饰
                    const cx = 400 + (i * 300);
                    const cy = 300 + (i * 50);
                    const r = 150 + (i * 20);
                    path.setAttribute('d', `M${cx+r},${cy} A${r},${r} 0 1,1 ${cx-r},${cy} A${r},${r} 0 1,1 ${cx+r},${cy}`);
                }
                
                // 随机延迟和透明度
                const delay = Math.random() * 10;
                path.style.animationDelay = `${delay}s`;
                
                const opacity = 0.3 + (Math.random() * 0.7);
                path.style.opacity = opacity;
                
                svg.appendChild(path);
            }
            
            // 添加装饰性的云纹图案
            for (let i = 0; i < 4; i++) {
                const cloudPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                cloudPath.className = 'decoration-path';
                cloudPath.setAttribute('stroke-dasharray', '800');
                
                const startX = i * 400;
                const startY = 150 + (i * 200);
                
                // 云纹路径
                cloudPath.setAttribute('d', `M${startX},${startY} C${startX+30},${startY-20} ${startX+60},${startY-20} ${startX+90},${startY} C${startX+120},${startY-20} ${startX+150},${startY-20} ${startX+180},${startY} C${startX+180},${startY+20} ${startX},${startY+20} ${startX},${startY}`);
                
                const delay = Math.random() * 8;
                cloudPath.style.animationDelay = `${delay}s`;
                
                svg.appendChild(cloudPath);
            }
        }
    </script>
</head>
<body>

    
    <!-- 头部导航 -->
    <header>
        <div class="header-content">
                <a href="#" class="logo">
                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M16 2L2 10V22L16 30L30 22V10L16 2Z" stroke="#f5d76e" stroke-width="2" fill="none"/>
                        <path d="M16 8V24" stroke="#f5d76e" stroke-width="2"/>
                        <path d="M6 12L26 12" stroke="#f5d76e" stroke-width="2"/>
                    </svg>
                    <span>燕云十六声</span>
                </a>
                <div style="display: flex; align-items: center;">
                    <nav>
                        <ul class="nav-links">
                            <li><a href="#hero" class="home-link" style="font-weight: bold; color: #f5d76e;">首页</a></li>
                            <li><a href="#about">游戏介绍</a></li>
                            <li><a href="#features">游戏特色</a></li>
                            <li><a href="#background">历史背景</a></li>
                            <li><a href="#notice">家长须知</a></li>
                            <li><a href="account-center.html">账号中心</a></li>
                        </ul>
                    </nav>
                    <div class="auth-buttons" id="auth-buttons">
                        <a href="#" class="login-button" id="login-btn">登录</a>
                    </div>
                </div>
            </div>
    </header>

    <!-- 英雄区域 -->
    <section class="hero">
        <div class="hero-content">
            <h1 class="ink-brush-title" data-text="燕云十六声">燕云十六声</h1>
            <p>9月26日，新篇章「不见山」震撼上线</p>
            <a href="account-center.html" class="hero-button" id="play-button" style="display: none;">进入游戏</a>
        </div>
    </section>

    <!-- 主要内容 -->
    <div class="content">
        <!-- 游戏介绍 -->
        <section id="about" class="section">
            <h2 class="section-title">游戏介绍</h2>
            <p class="info-text">《燕云十六声》是一款以五代十国末、北宋初期年代为背景的角色扮演类游戏。游戏采用精美的水墨风格画面，还原了那个动荡而又英雄辈出的年代。</p>
            <p class="info-text">玩家将扮演一位江湖少侠，在燕云十六州这片土地上，结交豪杰，习得武艺，参与各种江湖恩怨，最终成为一代宗师。游戏融合了丰富的历史文化元素，让玩家在游戏中感受中华文化的魅力。</p>
            
            <div class="age-warning">
                <h4>游戏适龄提示</h4>
                <p class="info-text" style="color: #001f3f;">本游戏适用于年满16周岁及以上的用户，建议未成年人在家长监护下使用游戏产品。我们鼓励家长根据未成年人的实际情况管理其游戏行为。</p>
            </div>
        </section>

        <!-- 游戏特色 -->
        <section id="features" class="section">
            <h2 class="section-title">游戏特色</h2>
            <div class="features">
                <div class="feature-card">
                    <div class="feature-icon">🎭</div>
                    <h3 class="feature-title" style="color: #001f3f;">百工名器</h3>
                    <p class="feature-description"><span style="color: #001f3f;">深度还原古代工匠技艺，打造属于你自己的传世名器，每一件武器都有独特的故事和属性。</span></p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🏯</div>
                    <h3 class="feature-title" style="color: #001f3f;">建筑营造</h3>
                    <p class="feature-description"><span style="color: #001f3f;">体验古代建筑的独特魅力，参与城池建设，感受中国传统建筑艺术的博大精深。</span></p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🌌</div>
                    <h3 class="feature-title" style="color: #001f3f;">历法天象</h3>
                    <p class="feature-description"><span style="color: #001f3f;">根据真实历法设计的游戏时间系统，不同的天象会影响游戏中的各种事件和任务。</span></p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🎪</div>
                    <h3 class="feature-title" style="color: #001f3f;">民俗游艺</h3>
                    <p class="feature-description"><span style="color: #001f3f;">体验丰富多彩的古代民俗活动，参与传统游戏，感受古人的日常生活乐趣。</span></p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🌿</div>
                    <h3 class="feature-title" style="color: #001f3f;">岐黄医术</h3>
                    <p class="feature-description"><span style="color: #001f3f;">学习传统中医知识，采集草药，炼制丹药，治疗伤病，成为江湖中的医道高手。</span></p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">👥</div>
                    <h3 class="feature-title" style="color: #001f3f;">团队协作</h3>
                    <p class="feature-description"><span style="color: #001f3f;">游戏设有组队模式，需要玩家互相配合完成任务，培养团队协作能力，结交志同道合的朋友。</span></p>
                </div>
            </div>
        </section>

        <!-- 历史背景 -->
        <section id="background" class="section game-background">
            <h2 class="section-title" style="color: #001f3f;">历史背景</h2>
            <p class="info-text"><span style="color: #001f3f;">五代十国末期，天下大乱，军阀割据，民不聊生。公元960年，赵匡胤发动陈桥兵变，建立北宋，开始了统一中原的进程。然而，北方的燕云十六州却被契丹人占据，成为北宋王朝的心头大患。</span></p>
            <p class="info-text"><span style="color: #001f3f;">游戏的故事就发生在这个动荡的年代。玩家将作为一名江湖侠士，卷入这场天下大势的纷争之中。你可以选择帮助宋军收复失地，也可以选择独善其身，专注于武学的修炼，成为一代宗师。</span></p>
            <p class="info-text"><span style="color: #001f3f;">在这个充满机遇和危险的时代，你的每一个选择都将影响游戏的走向。历史的车轮将如何转动，全在你的一念之间。</span></p>
        </section>

        <!-- 家长须知 -->
        <section id="notice" class="section">
            <h2 class="section-title">家长须知</h2>
            <p class="info-text">为了保护未成年人的健康成长，我们制定了严格的未成年人游戏管理措施：</p>
            <ul style="margin-left: 20px; margin-bottom: 20px;">
                <li class="info-text">游戏中部分玩法和道具需要付费。未满8周岁的用户不能付费；8周岁以上未满16周岁的未成年人用户，单次充值金额不得超过50元人民币，每月充值金额累计不得超过200元人民币；16周岁以上的未成年人用户，单次充值金额不得超过100元人民币，每月充值金额累计不得超过400元人民币。</li>
                <li class="info-text">未成年玩家可在周五、周六、周日和法定节假日每日晚20时至21时登录游戏，其他时间无法登录游戏。</li>
                <li class="info-text">游戏中有用户实名认证系统，未实名账号不能登录游戏。</li>
            </ul>
            <p class="info-text">家长可以关注"网易家长关爱平台"微信公众号、拨打官方客服电话95163611或者登录网易家长关爱平台查看具体指引，帮助未成年人健康使用游戏产品。</p>
        </section>

        <!-- 账号中心 -->
        <section id="account" class="section">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
                <h2 class="section-title">账号中心</h2>
                <button id="back-button" style="display: flex; align-items: center; gap: 8px; padding: 10px 20px; background-color: #333; color: white; border: none; border-radius: 4px; cursor: pointer;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M19 12H5M12 19l-7-7 7-7"/>
                    </svg>
                    返回顶部
                </button>
            </div>
            <div id="login-prompt" style="text-align: center; padding: 40px;">
                <p class="info-text" style="font-size: 18px; margin-bottom: 20px;">请先登录以访问游戏内容</p>
                <a href="#" class="hero-button" id="login-center-btn">立即登录</a>
            </div>
            <!-- 账号中心模块已移除 -->
                <div class="account-container">
                    <!-- 已登录状态 - 账号中心内容 -->
                    <div id="account-dashboard">
                        <div class="account-layout">
                            <!-- 侧边栏 -->
                            <aside class="account-sidebar">
                                <!-- 用户信息卡片 -->
                                <div class="user-profile-card">
                                    <div class="profile-avatar" id="profile-avatar"></div>
                                    <h3 class="profile-username" id="profile-username">玩家名称</h3>
                                    <p class="profile-level">账号等级: <span id="profile-level">1</span></p>
                                </div>
                                 
                                <!-- 导航菜单 -->
                                <ul class="nav-menu">
                                    <li class="nav-menu-item">
                                        <a href="#dashboard" class="nav-menu-link active" data-section="dashboard">
                                            <span class="nav-menu-icon">📊</span>
                                            <span>数据总览</span>
                                        </a>
                                    </li>
                                    <li class="nav-menu-item">
                                        <a href="#characters" class="nav-menu-link" data-section="characters">
                                            <span class="nav-menu-icon">🎮</span>
                                            <span>角色管理</span>
                                        </a>
                                    </li>
                                    <li class="nav-menu-item">
                                        <a href="#friends" class="nav-menu-link" data-section="friends">
                                            <span class="nav-menu-icon">👥</span>
                                            <span>好友系统</span>
                                        </a>
                                    </li>
                                    <li class="nav-menu-item">
                                        <a href="#inventory" class="nav-menu-link" data-section="inventory">
                                            <span class="nav-menu-icon">🎒</span>
                                            <span>背包道具</span>
                                        </a>
                                    </li>
                                    <li class="nav-menu-item">
                                        <a href="#achievements" class="nav-menu-link" data-section="achievements">
                                            <span class="nav-menu-icon">🏆</span>
                                            <span>成就系统</span>
                                        </a>
                                    </li>
                                    <li class="nav-menu-item">
                                        <a href="#settings" class="nav-menu-link" data-section="settings">
                                            <span class="nav-menu-icon">⚙️</span>
                                            <span>账号设置</span>
                                        </a>
                                    </li>
                                    <li class="nav-menu-item">
                                        <a href="#security" class="nav-menu-link" data-section="security">
                                            <span class="nav-menu-icon">🔒</span>
                                            <span>安全中心</span>
                                        </a>
                                    </li>
                                </ul>
                            </aside>
                            
                            <!-- 主内容区域 -->
                            <main class="account-main-content">
                                <!-- 数据总览 -->
                                <div id="dashboard-section" class="content-section">
                                    <div class="section-header">
                                        <h2 class="section-title">数据总览</h2>
                                    </div>
                                    
                                    <!-- 统计数据 -->
                                    <div class="stats-grid">
                                        <div class="stat-card">
                                            <div class="stat-value" id="play-time">0</div>
                                            <div class="stat-label">游戏时长 (小时)</div>
                                        </div>
                                        <div class="stat-card">
                                            <div class="stat-value" id="character-count">0</div>
                                            <div class="stat-label">创建角色</div>
                                        </div>
                                        <div class="stat-card">
                                            <div class="stat-value" id="achievement-count">0</div>
                                            <div class="stat-label">已解锁成就</div>
                                        </div>
                                        <div class="stat-card">
                                            <div class="stat-value" id="friends-count">0</div>
                                            <div class="stat-label">好友数量</div>
                                        </div>
                                    </div>
                                    
                                    <!-- 最近活动 -->
                                    <div class="content-section">
                                        <div class="section-header">
                                            <h2 class="section-title">最近活动</h2>
                                            <a href="#" class="section-action">查看全部</a>
                                        </div>
                                        <ul class="activity-list">
                                            <li class="activity-item">
                                                <span class="activity-icon">🎮</span>
                                                <div class="activity-content">
                                                    <div class="activity-title">登录游戏</div>
                                                    <div class="activity-time">今天 14:30</div>
                                                </div>
                                            </li>
                                            <li class="activity-item">
                                                <span class="activity-icon">🏆</span>
                                                <div class="activity-content">
                                                    <div class="activity-title">解锁新成就：「初入江湖」</div>
                                                    <div class="activity-time">昨天 19:45</div>
                                                </div>
                                            </li>
                                            <li class="activity-item">
                                                <span class="activity-icon">🎒</span>
                                                <div class="activity-content">
                                                    <div class="activity-title">获得稀有道具：「玄铁剑」</div>
                                                    <div class="activity-time">3天前</div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <!-- 角色管理 -->
                                <div id="characters-section" class="content-section" style="display: none;">
                                    <div class="section-header">
                                        <h2 class="section-title">角色管理</h2>
                                        <a href="#" class="section-action">创建新角色</a>
                                    </div>
                                    <div class="characters-grid">
                                        <div class="character-card">
                                            <div class="character-image">⚔️</div>
                                            <div class="character-info">
                                                <h3 class="character-name">李逍遥</h3>
                                                <div class="character-details">
                                                    <span>等级：45</span>
                                                    <span>门派：华山派</span>
                                                </div>
                                                <div class="character-details" style="margin-top: 5px;">
                                                    <span>战力：8500</span>
                                                    <span>创建：1个月前</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="character-card">
                                            <div class="character-image">🗡️</div>
                                            <div class="character-info">
                                                <h3 class="character-name">赵敏</h3>
                                                <div class="character-details">
                                                    <span>等级：38</span>
                                                    <span>门派：峨眉派</span>
                                                </div>
                                                <div class="character-details" style="margin-top: 5px;">
                                                    <span>战力：6200</span>
                                                    <span>创建：2周前</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 好友系统 -->
                                <div id="friends-section" class="content-section" style="display: none;">
                                    <div class="section-header">
                                        <h2 class="section-title">好友系统</h2>
                                        <a href="#" class="section-action">添加好友</a>
                                    </div>
                                    <div style="text-align: center; padding: 40px;">
                                        <p>您当前有 <span style="color: #f5d76e; font-weight: bold;">12</span> 位好友</p>
                                        <p style="color: rgba(255, 255, 255, 0.7); margin-top: 10px;">好友列表功能正在加载中...</p>
                                    </div>
                                </div>
                                
                                <!-- 背包道具 -->
                                <div id="inventory-section" class="content-section" style="display: none;">
                                    <div class="section-header">
                                        <h2 class="section-title">背包道具</h2>
                                        <a href="#" class="section-action">整理背包</a>
                                    </div>
                                    <div style="text-align: center; padding: 40px;">
                                        <p>背包内拥有 <span style="color: #f5d76e; font-weight: bold;">28</span> 件道具</p>
                                        <p style="color: rgba(255, 255, 255, 0.7); margin-top: 10px;">背包详情功能正在加载中...</p>
                                    </div>
                                </div>
                                
                                <!-- 成就系统 -->
                                <div id="achievements-section" class="content-section" style="display: none;">
                                    <div class="section-header">
                                        <h2 class="section-title">成就系统</h2>
                                        <a href="#" class="section-action">查看全部</a>
                                    </div>
                                    <div style="text-align: center; padding: 40px;">
                                        <p>已解锁 <span style="color: #f5d76e; font-weight: bold;">15/100</span> 个成就</p>
                                        <p style="color: rgba(255, 255, 255, 0.7); margin-top: 10px;">成就列表功能正在加载中...</p>
                                    </div>
                                </div>
                                
                                <!-- 账号设置 -->
                                <div id="settings-section" class="content-section" style="display: none;">
                                    <div class="section-header">
                                        <h2 class="section-title">账号设置</h2>
                                    </div>
                                    <div style="display: grid; grid-template-columns: 1fr; gap: 30px;">
                                        <div>
                                            <h3 style="margin-bottom: 20px; color: #ffffff;">基本信息</h3>
                                            <div class="form-group">
                                                <label class="form-label">用户名</label>
                                                <input type="text" class="form-input" id="username-input" disabled>
                                            </div>
                                        </div>
                                        <div>
                                            <h3 style="margin-bottom: 20px; color: #ffffff;">密码修改</h3>
                                            <div class="form-group">
                                                <label class="form-label">当前密码</label>
                                                <input type="password" class="form-input" placeholder="请输入当前密码">
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label">新密码</label>
                                                <input type="password" class="form-input" placeholder="请输入新密码">
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label">确认新密码</label>
                                                <input type="password" class="form-input" placeholder="请再次输入新密码">
                                            </div>
                                            <button class="btn btn-primary">修改密码</button>
                                            <p style="margin-top: 15px; font-size: 14px; color: rgba(255, 255, 255, 0.7);">定期修改密码可以保护账号安全</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 安全中心 -->
                                <div id="security-section" class="content-section" style="display: none;">
                                    <div class="section-header">
                                        <h2 class="section-title">安全中心</h2>
                                    </div>
                                    <div class="security-item">
                                        <div class="security-info">
                                            <h4>手机绑定</h4>
                                            <p>未绑定手机号</p>
                                        </div>
                                        <button class="btn btn-primary">立即绑定</button>
                                    </div>
                                    <div class="security-item">
                                        <div class="security-info">
                                            <h4>邮箱绑定</h4>
                                            <p>未绑定邮箱</p>
                                        </div>
                                        <button class="btn btn-primary">立即绑定</button>
                                    </div>
                                    <div class="security-item">
                                        <div class="security-info">
                                            <h4>登录设备管理</h4>
                                            <p>管理已登录的设备</p>
                                        </div>
                                        <button class="btn btn-secondary">查看详情</button>
                                    </div>
                                </div>
                            </main>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- 高级美化的登录模态框 -->
    <div id="app">
        <!-- 登录模态框 -->
        <el-dialog
            v-model="dialogVisible"
            title=""
            width="420px"
            :close-on-click-modal="true"
            :custom-class="'elegant-login-dialog'"
            :show-close="true"
            destroy-on-close
        >
            <template #header>
                <div class="custom-header">
                    <div class="logo-container">
                        <svg width="40" height="40" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16 2L2 10V22L16 30L30 22V10L16 2Z" stroke="#f5d76e" stroke-width="2" fill="none"/>
                            <path d="M16 8V24" stroke="#f5d76e" stroke-width="2"/>
                            <path d="M6 12L26 12" stroke="#f5d76e" stroke-width="2"/>
                        </svg>
                        <h3 class="login-title">燕云十六声</h3>
                    </div>
                    <p class="login-subtitle">登录账号，开启江湖之旅</p>
                </div>
            </template>
            
            <el-form 
                @submit.prevent="handleLogin" 
                :model="loginForm"
                status-icon
                class="login-form"
            >
                <!-- 账号输入框 -->
                <el-form-item 
                    prop="username" 
                    :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]"
                    class="form-item-animation"
                >
                    <el-input
                        v-model="loginForm.username"
                        placeholder="请输入账号"
                        name="username"
                        prefix-icon="el-icon-user-solid"
                        :autocomplete="'username'"
                        class="elegant-input"
                    >
                        <template #prepend>
                            <div class="input-prepend">
                                <i class="el-icon-user"></i>
                            </div>
                        </template>
                    </el-input>
                </el-form-item>
                
                <!-- 密码输入框 -->
                <el-form-item 
                    prop="password" 
                    :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
                    class="form-item-animation"
                >
                    <el-input
                        v-model="loginForm.password"
                        type="password"
                        placeholder="请输入密码"
                        name="password"
                        prefix-icon="el-icon-lock"
                        :autocomplete="'current-password'"
                        class="elegant-input"
                        show-password
                    >
                        <template #prepend>
                            <div class="input-prepend">
                                <i class="el-icon-lock"></i>
                            </div>
                        </template>
                    </el-input>
                </el-form-item>
                
                <!-- 记住密码和忘记密码 -->
                <el-form-item class="form-options form-item-animation">
                    <el-checkbox v-model="rememberMe" class="remember-checkbox">记住账号</el-checkbox>
                    <el-link type="primary" :underline="false" class="forgot-password">忘记密码？</el-link>
                </el-form-item>
                
                <!-- 登录按钮 -->
                <el-form-item class="form-item-animation">
                    <el-button 
                        type="primary" 
                        native-type="submit"
                        class="login-button-primary"
                        :loading="isLoading"
                    >
                        <template #default>
                            <span v-if="!isLoading">登录账号</span>
                            <span v-else>登录中...</span>
                        </template>
                    </el-button>
                </el-form-item>
                
                <!-- 其他登录方式 -->
                <div class="other-login-methods">
                    <div class="divider">
                        <span>其他登录方式</span>
                    </div>
                    <div class="social-login">
                        <el-button size="small" class="social-btn wechat"><i class="el-icon-mobile-phone"></i></el-button>
                        <el-button size="small" class="social-btn qq"><i class="el-icon-chat-dot-round"></i></el-button>
                        <el-button size="small" class="social-btn weibo"><i class="el-icon-camera"></i></el-button>
                    </div>
                </div>
            </el-form>
        </el-dialog>
    </div>
        <div class="footer-content">
            <div class="footer-column">
                <h4>关于我们</h4>
                <ul>
                    <li><a href="#">公司简介</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">招聘信息</a></li>
                    <li><a href="#">新闻中心</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h4>游戏支持</h4>
                <ul>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">账号服务</a></li>
                    <li><a href="#">客服中心</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h4>法律声明</h4>
                <ul>
                    <li><a href="#">用户协议</a></li>
                    <li><a href="#">隐私政策</a></li>
                    <li><a href="#">儿童隐私保护</a></li>
                    <li><a href="#">版权声明</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h4>关注我们</h4>
                <ul>
                    <li><a href="#">官方微博</a></li>
                    <li><a href="#">微信公众号</a></li>
                    <li><a href="#">官方论坛</a></li>
                    <li><a href="#">视频账号</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>© 2023 燕云十六声 版权所有 | 网络游戏出版物号：ISBN XXXXXXXXXX | 文网游备字[XXXX]XXXXX号</p>
            <p>抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。</p>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 简单的平滑滚动效果
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
        
        // 使用Vue重构账号登录相关功能
        const { createApp, ref, reactive, onMounted } = Vue;
        
        const app = createApp({
            setup() {
                // 响应式数据
                const dialogVisible = ref(false);
                const isLoggedIn = ref(false);
                const username = ref('');
                const userAvatarBg = ref('');
                const isLoading = ref(false);
                const rememberMe = ref(false);
                
                // 登录表单数据
                const loginForm = reactive({
                    username: '',
                    password: ''
                });
                
                // 检查登录状态
                const checkLoginStatus = () => {
                    const user = localStorage.getItem('loggedInUser');
                    if (user) {
                        const userData = JSON.parse(user);
                        username.value = userData.username;
                        generateAvatarColor();
                        isLoggedIn.value = true;
                    }
                };
                
                // 生成用户头像颜色
                const generateAvatarColor = () => {
                    const colors = ['#4285F4', '#EA4335', '#FBBC05', '#34A853', '#FF6D00', '#9C27B0'];
                    userAvatarBg.value = colors[Math.floor(Math.random() * colors.length)];
                };
                
                // 打开登录模态框
                const openModal = () => {
                    dialogVisible.value = true;
                };
                
                // 关闭登录模态框
                const closeModalFunc = () => {
                    dialogVisible.value = false;
                };
                
                // 登录处理
                const handleLogin = async () => {
                    isLoading.value = true;
                    
                    try {
                        // 模拟登录延迟
                        await new Promise(resolve => setTimeout(resolve, 1000));
                        
                        if (loginForm.username && loginForm.password) {
                            // 保存用户信息到localStorage
                            localStorage.setItem('loggedInUser', JSON.stringify({ 
                                username: loginForm.username,
                                rememberMe: rememberMe.value
                            }));
                            
                            // 更新用户信息
                            username.value = loginForm.username;
                            generateAvatarColor();
                            isLoggedIn.value = true;
                            
                            // 关闭模态框
                            closeModalFunc();
                            
                            // 重置表单
                            loginForm.username = '';
                            loginForm.password = '';
                            
                            // 提示登录成功 (带动画)
                            ElMessage({
                                message: '登录成功！欢迎来到燕云十六声。',
                                type: 'success',
                                duration: 3000
                            });
                        } else {
                            ElMessage.warning('请输入账号和密码');
                        }
                    } catch (error) {
                        ElMessage.error('登录失败，请重试');
                    } finally {
                        isLoading.value = false;
                    }
                };
                
                // 退出登录
                const logout = () => {
                    // 清除localStorage中的用户信息
                    localStorage.removeItem('loggedInUser');
                    
                    // 更新状态
                    isLoggedIn.value = false;
                    username.value = '';
                    
                    // 提示退出成功
                    ElMessage.info('您已成功退出登录');
                };
                
                // 为账号中心的登录按钮添加事件监听
                onMounted(() => {
                    checkLoginStatus();
                    
                    // 确保原有的登录按钮能打开Vue模态框
                    const loginBtn = document.getElementById('login-btn');
                    if (loginBtn) {
                        loginBtn.addEventListener('click', openModal);
                    }
                    
                    const loginCenterBtn = document.getElementById('login-center-btn');
                    if (loginCenterBtn) {
                        loginCenterBtn.addEventListener('click', (e) => {
                            e.preventDefault();
                            openModal();
                        });
                    }
                });
                
                return {
                    dialogVisible,
                    isLoggedIn,
                    username,
                    userAvatarBg,
                    loginForm,
                    isLoading,
                    rememberMe,
                    openModal,
                    closeModalFunc,
                    handleLogin,
                    logout
                };
            }
        });
        
        // 使用Element Plus
        app.use(ElementPlus);
        app.mount('#app');
        
        // 更新账号中心的显示逻辑，使其与Vue状态同步
        function updateAccountDisplay() {
            const vm = app._instance.proxy;
            if (vm.isLoggedIn) {
                // 显示用户信息
                const colors = ['#4285F4', '#EA4335', '#FBBC05', '#34A853', '#FF6D00', '#9C27B0'];
                const randomColor = colors[Math.floor(Math.random() * colors.length)];
                const avatar = `<div style="background-color: ${vm.userAvatarBg}; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">${vm.username.charAt(0).toUpperCase()}</div>`;
                
                const authButtons = document.getElementById('auth-buttons');
                authButtons.innerHTML = `
                    <div class="user-info">
                        <div class="user-avatar">${avatar}</div>
                        <span>${vm.username}</span>
                    </div>
                    <button class="logout-button" id="logout-btn">退出</button>
                `;
                
                // 绑定退出按钮事件到Vue方法
                document.getElementById('logout-btn').addEventListener('click', () => vm.logout());
                
                // 显示游戏入口按钮
                document.getElementById('play-button').style.display = 'block';
                
                // 显示账号中心内容，隐藏登录提示
                document.getElementById('login-prompt').style.display = 'none';
                document.getElementById('account-content').style.display = 'block';
            } else {
                // 显示登录按钮
                const authButtons = document.getElementById('auth-buttons');
                authButtons.innerHTML = '<a href="#" class="login-button" id="login-btn">登录</a>';
                document.getElementById('login-btn').addEventListener('click', () => {
                    const vm = app._instance.proxy;
                    vm.openModal();
                });
                
                document.getElementById('login-prompt').style.display = 'block';
                document.getElementById('account-content').style.display = 'none';
                document.getElementById('play-button').style.display = 'none';
            }
        }
        
        // 监听Vue实例的状态变化并更新DOM
        app._instance.proxy.$watch('isLoggedIn', () => {
            setTimeout(updateAccountDisplay, 0);
        });
        
        // 初始更新显示
        setTimeout(updateAccountDisplay, 0);
        
        // 账号中心导航切换功能
        function setupAccountNavigation() {
            const navLinks = document.querySelectorAll('.nav-menu-link');
            const sections = document.querySelectorAll('.content-section');
            
            navLinks.forEach(link => {
                link.addEventListener('click', (e) => {
                    e.preventDefault();
                    
                    // 移除所有链接的活跃状态
                    navLinks.forEach(item => item.classList.remove('active'));
                    
                    // 添加当前链接的活跃状态
                    link.classList.add('active');
                    
                    // 获取要显示的部分
                    const sectionId = link.getAttribute('data-section');
                    const targetSection = document.getElementById(`${sectionId}-section`);
                    
                    // 隐藏所有部分
                    sections.forEach(section => {
                        section.style.display = 'none';
                    });
                    
                    // 显示目标部分
                    if (targetSection) {
                        targetSection.style.display = 'block';
                    }
                });
            });
        }
        
        // 在Vue组件挂载后设置账号中心导航
        function initAccountCenter() {
            // 设置账号中心导航
            setupAccountNavigation();
            
            // 将Vue中的用户名同步到账号中心
            const updateAccountInfo = () => {
                const vm = app._instance.proxy;
                if (vm && vm.isLoggedIn && vm.username) {
                    // 更新账号中心的用户名和头像
                    const profileUsername = document.getElementById('profile-username');
                    const profileAvatar = document.getElementById('profile-avatar');
                    const usernameInput = document.getElementById('username-input');
                    
                    if (profileUsername) {
                        profileUsername.textContent = vm.username;
                    }
                    
                    if (profileAvatar && vm.userAvatarBg) {
                        profileAvatar.innerHTML = vm.username.charAt(0).toUpperCase();
                        profileAvatar.style.backgroundColor = vm.userAvatarBg;
                    }
                    
                    if (usernameInput) {
                        usernameInput.value = vm.username;
                    }
                    
                    // 模拟一些用户数据
                    const stats = [
                        { id: 'play-time', value: Math.floor(Math.random() * 100) + 10 },
                        { id: 'character-count', value: Math.floor(Math.random() * 5) + 1 },
                        { id: 'achievement-count', value: Math.floor(Math.random() * 30) + 5 },
                        { id: 'friends-count', value: Math.floor(Math.random() * 50) + 5 }
                    ];
                    
                    stats.forEach(stat => {
                        const element = document.getElementById(stat.id);
                        if (element) {
                            element.textContent = stat.value;
                        }
                    });
                }
            };
            
            // 监听Vue实例的状态变化并更新账号中心
            if (app && app._instance && app._instance.proxy) {
                app._instance.proxy.$watch('isLoggedIn', () => {
                    setTimeout(updateAccountInfo, 0);
                });
                
                // 初始更新
                setTimeout(updateAccountInfo, 100);
            }
        }
        
        // 返回顶部功能
        function setupBackButton() {
            const backButton = document.getElementById('back-button');
            if (backButton) {
                backButton.addEventListener('click', () => {
                    window.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });
                });
            }
        }
        
        // 页面加载完成后初始化账号中心和返回按钮
        window.addEventListener('DOMContentLoaded', () => {
            setTimeout(initAccountCenter, 500); // 给Vue一些时间初始化
            setupBackButton(); // 设置返回按钮功能
        });
        
        // 响应式导航菜单（小屏幕）
        const navToggle = document.createElement('button');
        navToggle.textContent = '菜单';
        navToggle.style.display = 'none';
        navToggle.style.position = 'fixed';
        navToggle.style.top = '20px';
        navToggle.style.right = '20px';
        navToggle.style.zIndex = '100';
        navToggle.style.padding = '10px 15px';
        navToggle.style.backgroundColor = '#1a1a2e';
        navToggle.style.color = 'white';
        navToggle.style.border = 'none';
        navToggle.style.borderRadius = '5px';
        navToggle.style.cursor = 'pointer';
        document.body.appendChild(navToggle);
        
        function checkScreenSize() {
            const nav = document.querySelector('nav');
            if (window.innerWidth < 768) {
                nav.style.display = 'none';
                navToggle.style.display = 'block';
            } else {
                nav.style.display = 'block';
                navToggle.style.display = 'none';
            }
        }
        
        navToggle.addEventListener('click', function() {
            const nav = document.querySelector('nav');
            nav.style.display = nav.style.display === 'none' ? 'block' : 'none';
        });
        
        window.addEventListener('resize', checkScreenSize);
        checkScreenSize();
    </script>
</body>
</html>